<template>
  <div id="info">
    <div class="info-key">{{ itemParams.info.key }}</div>
    <template>
      <table class="rule" cellspacing="0">
        <tr v-for="(table, index) in itemParams.rule.tables[0]" :key="index">
          <td>{{ table[0] }}</td>
          <td>{{ table[1] }}</td>
          <td>{{ table[2] }}</td>
          <td>{{ table[3] }}</td>
          <td>{{ table[4] }}</td>
        </tr>
      </table>
    </template>
    <table class="rule .rule-table" cellspacing="0">
      <tr v-for="(item, index) in itemParams.info.set" :key="index">
        <td class="key">{{ item.key }}</td>
        <td class="value">{{ item.value }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  props: ["itemParams"],
};
</script>

<style scoped>
.info-key {
  text-align: center;
  margin: 10px;
}
.rule {
  width: 100%;
  color: rgb(116, 113, 113);
  font-family: "黑体";
}
.rule td {
  text-align: center;
  font-size: 14px;
  height: 50px;
  line-height: 20px;
  border-collapse: collapse;
  border-bottom: solid 1px rgba(158, 156, 156, 0.1);
}
.value {
  color: rgb(250, 118, 118);
  width: 80%;
}
.rule-table {
  margin-left: 20px;
  border-top: 5px solid rgb(109, 107, 107, 0.1);
}
.key {
  width: 20%;
}
</style>
